import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router'
import store from './store'
import { publicPath } from '@/api/constants'
// @ts-ignore
import {
  Layout,
  Avatar,
  Menu,
  Icon,
  Modal,
  Dropdown,
  Breadcrumb,
  Button,
  Table,
  Divider,
  Select,
  Tree,
  Tooltip,
  Input,
  Form,
  FormModel,
  Radio,
  Checkbox,
  InputNumber,
  message,
  Upload,
  Spin,
  Tabs,
  Switch,
  Slider,
  Collapse,
  Col,
  Row,
  Popover,
  Transfer,
  DatePicker,
  Pagination,
  Progress,
  Cascader,
  Timeline,
  Popconfirm,
  List,
  Alert,
  Steps,
  Descriptions,
  ConfigProvider,
} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.use(Layout)
Vue.use(Layout.Header)
Vue.use(Layout.Sider)
Vue.use(Avatar)
Vue.use(Menu)
Vue.use(Menu.Item)
Vue.use(Icon)
Vue.use(Modal)
Vue.use(Dropdown)
Vue.use(Breadcrumb)
Vue.use(Breadcrumb.Item)
Vue.use(Button)
Vue.use(Table)
Vue.use(Divider)
Vue.use(Select)
Vue.use(Select.Option)
Vue.use(Tree)
Vue.use(Tooltip)
Vue.use(Input)
Vue.use(Form)
Vue.use(Form.Item)
Vue.use(FormModel)
Vue.use(FormModel.Item)
Vue.use(Radio.Group)
Vue.use(Radio)
Vue.use(Checkbox)
Vue.use(InputNumber)
Vue.use(Upload)
Vue.use(Spin)
Vue.use(Input.TextArea)
Vue.use(Tabs)
Vue.use(Tabs.TabPane)
Vue.use(Switch)
Vue.use(Slider)
Vue.use(Collapse)
Vue.use(Col)
Vue.use(Row)
Vue.use(Popover)
Vue.use(Transfer)
Vue.use(DatePicker)
Vue.use(DatePicker.RangePicker)
Vue.use(Pagination)
Vue.use(Progress)
Vue.use(Cascader)
Vue.use(Timeline)
Vue.use(Popconfirm)
Vue.use(List)
Vue.use(Alert)
Vue.use(Steps)
Vue.use(Descriptions)
Vue.use(ConfigProvider)

message.config({
  top: '100px',
  duration: 2,
  maxCount: 2,
})
Vue.prototype.$message = message
Vue.prototype.$confirm = Modal.confirm

Vue.component(
  'AIconFont',
  Icon.createFromIconfontCN({
    // scriptUrl: '//at.alicdn.com/t/c/font_1566179_9j3xad586jt.js',
    scriptUrl: `${publicPath}/fonts/iconfont/iconfont.js`,
  })
)

Vue.config.productionTip = false
// qiankun config
// @ts-ignore
if (window.__POWERED_BY_QIANKUN__) {
  if (process.env.NODE_ENV === 'development') {
    // VUE_APP_PORT 为环境变量，devserver的port
    // @ts-ignore
    __webpack_public_path__ = `//localhost:${process.env.VUE_APP_PORT}${process.env.BASE_URL}`
  } else {
    // @ts-ignore
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
  }
}

let instance: null | Vue = null
function render(properties = {}) {
  const { container, routerBase, parentRouter, parentEventBus, parentStore } =
    properties as any
  const router = new VueRouter({
    mode: 'history',
    // @ts-ignore
    base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
    routes,
  })
  Vue.prototype.$parentRouter = parentRouter
  // Vue.prototype.microStore = microStore
  Vue.prototype.$eventBus = new Vue() // 子应用的独享的 EventBus
  Vue.prototype.$parentEventBus = parentEventBus // 主应用下发的 EventBus

  instance = new Vue({
    router,
    data() {
      return {
        parentVuex: parentStore, // 父应用 vuex
      }
    },
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app')
  if (process.env.NODE_ENV === 'development') {
    const subDiv = document.createElement('div')
    // @ts-ignore
    subDiv.__vue__ = instance
    document.body.append(subDiv)
  }
}

/**
 * qiankun 启动
 */
export async function bootstrap() {
  console.log('@nebula/kg-application bootstrap')
}
/**
 * qiankun调用的方法
 * @param properties
 */
export async function mount(properties: any) {
  console.log('[vue] @nebula/kg-application app mount', properties)
  render(properties)
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(properties: any) {
  console.log('[vue] @nebula/kg-application app unmount', properties)
  if (instance) {
    instance.$destroy()
    instance.$el.innerHTML = ''
  }
  instance = null
}

// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {
  // 这里是子应用独立运行的环境
  render()
}
